<template>
	<view class="examination">
		<view class="title">请选择体检人</view>
		<view v-for="v in Data.listData" :key="v.id" @click="go(v.id)">
			<view class="box">
				<view class="left">
					<text class="name">{{ v.name }}</text>
					<text class="blue">{{ ['本人', '子女', '夫妻', '父母', '朋友'][v.relationType] }}</text>
				</view>
				<view class="idNumber">{{ v.cardNum }}</view>
				<view class="type" style="float: right;">{{ v.status === 0 ? '默认就诊人' : '' }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { patient } from '@/api/ExaminationService.js';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, onMounted } from 'vue';
import { useTopStore } from '@/store/TopUpService.js';
const topStore = useTopStore();

const Data = reactive({
	listData: []
});
const go = id => {
	uni.navigateTo({
		url: `/pages/examinationService/examinationReserve/examinationReserve?id=${id}`
	});
	// console.log('用户id', id);
};
const patientFn = id => {
	patient({ id })
		.then(({ data }) => {
			Data.listData = data.data;
			// Data.listData.forEach(v => {
			// 	Data.listData = v;
			// });
			console.log(Data.listData);
		})
		.catch(err => {
			console.log(err);
		});
};

onMounted(() => {
	patientFn(topStore.userId);
});
</script>

<style lang="less" scoped>
.examination {
	width: 688rpx;
	margin-left: 32rpx;
	margin-top: 24rpx;

	.title {
		width: 192rpx;
		height: 42rpx;
		font-weight: 500;
		font-style: normal;
		font-size: 15px;
		margin-bottom: 38rpx;
	}

	.extra {
		margin-top: -20rpx;
	}

	.box {
		width: 688rpx;
		height: 176rpx;
		margin-bottom: 32rpx;
		background-color: #f5f9ff;
		border: 1rpx solid #f2f2f2;
		border-radius: 15rpx;
		.left {
			display: flex;
			.name {
				margin-top: 48rpx;
				margin-right: 18rpx;
				margin-left: 26rpx;
				font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 15px;
				color: #555555;
			}

			.blue {
				margin-top: 52rpx;
				width: 88rpx;
				height: 40rpx;
				background-color: #e2edfe;
				font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
				font-weight: 200;
				font-style: normal;
				font-size: 12px;
				letter-spacing: 2rpx;
				color: #006eff;
				line-height: 38rpx;
				text-align: center;
				border-radius: 20rpx;
				// margin-top: 50rpx;
			}
		}

		.idNumber {
			margin-left: 26rpx;
			margin-top: 14rpx;
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			font-weight: 200;
			font-style: normal;
			font-size: 12px;
			color: #aaaaaa;
		}

		.type {
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			font-weight: 200;
			font-style: normal;
			font-size: 12px;
			margin-right: 20rpx;
			margin-top: -80rpx;
		}
	}
}
</style>
